<template lang="pug">
  .userManage-con
    Card.userManage-header
      span 用户名称：
      Input(v-model='userName',placeholder='用户名称') 
      Button(type='primary',@click='handleUpdateTableData()') 查询
      Button(v-if="$route.meta['/user/add']",@click="$router.push({name:'user_setting',query:{status:'add'}})") 新增
    Card.userManage-body
      show-table(ref='tab',:total='total',:current='current',:columns='columns',:data='userData',@handleChangePage='handleChangePage')
</template>

<script>
import showTable from '@/components/show-table/show-table'
import { asyncUser } from '../api'

export default {
  name: 'UserManage',
  components: { showTable },
  data() {
    return {
      userName: '',
      total: 0,
      current: 1,
      userData: [],
      columns: [
        { title: 'ID', align: 'center', width: 60, key: 'userId' },
        {
          title: '用户名',
          align: 'center',
          render: (h, params) => {
            if (this.$route.meta['/user/update']) {
              return h('router-link', { attrs: { to: { name: 'user_setting', query: { status: 'modify', userId: params.row.userId } } } }, params.row.userName)
            } else {
              return h('span', params.row.userName)
            }
          }
        },
        {
          title: '用户角色',
          width: 80,
          align: 'center',
          key: 'roleName'
        },
        {
          title: '在线状态',
          width: 70,
          align: 'center',
          render: (h, params) => {
            switch (params.row.onLineStatus) {
              case 0:
                return h('span', '未登录')
              case 1:
                return h('span', '已登录')
            }
          }
        },
        { title: '联系方式', align: 'center', key: 'cellPhone' },
        { title: '创建时间', width: 130, align: 'center', key: 'creatTimes' },
        { title: '邮箱', align: 'center', key: 'email' },
        { title: '上次登录时间', width: 130, align: 'center', key: 'lastTimes' }
      ],
      dynamiColumns: [
        {
          title: ' 状态',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: { fontSize: '16px', cursor: 'pointer', padding: '5px 13px' },
                attrs: { title: params.row.enabled === 0 ? '启用用户' : '禁用用户' },
                on: {
                  click: () => {
                    this.handleChangeStatus(params.row.enabled === 0 ? 1 : 0, params.row.userId, params.index)
                  }
                }
              },
              [h('Icon', { style: { color: params.row.enabled === 0 ? '#108ee9' : '#ee2337' }, attrs: { type: params.row.enabled === 0 ? 'ios-play' : 'ios-pause' } })]
            )
          }
        },
        {
          title: '操作',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h(
              'Poptip',
              {
                attrs: { confirm: true, title: '确定要删除该用户吗?', placement: 'top-end', width: 200 },
                on: { 'on-ok': () => this.handleUserDelete(params.row.userId, params.index) }
              },
              [h('Button', { attrs: { icon: 'md-trash', title: '删除' }, style: { color: '#f04134', background: '#f7f7f7' }, class: { 'operate-btn': true } })]
            )
          }
        }
      ]
    }
  },
  mounted() {
    if (this.$route.meta['/user/updateEnableds']) this.columns.splice(6, 0, this.dynamiColumns[0])
    if (this.$route.meta['/user/delete']) this.columns.push(this.dynamiColumns[1])
    this.handleTableData()
  },
  methods: {
    handleUpdateTableData(current = 1) {
      this.current = current
      this.handleTableData()
    },
    handleChangePage(pageSub) {
      this.handleUpdateTableData(pageSub)
    },
    handleTableData: async function() {
      try {
        this.total = 0
        this.userData = []
        this.$refs['tab'].loading = true
        const res = await asyncUser.list({ data: { pageIndex: this.current, pageSize: this.$refs['tab'].pageSize, userName: this.userName } })
        this.userData = res.data.data.result
        this.total = res.data.data.recordCount
        this.$refs['tab'].loading = false
      } catch (error) {
        this.$refs['tab'].loading = false
      }
    },
    handleChangeStatus: async function(enabled, userId, index) {
      try {
        await asyncUser.updateEnableds({ data: { enabled, userId } })
        this.userData[index].enabled = enabled
        if (enabled === 0) {
          this.userData[index].onLineStatus = 0
          this.$Message.success('禁用成功')
        } else {
          this.$Message.success('启用成功')
        }
      } catch (error) {}
    },
    handleUserDelete: async function(userId, index) {
      try {
        await asyncUser.delete({ data: { userId } })
        this.userData.splice(index, 1)
        this.handleUpdateTableData(this.userData.length !== 0 ? this.current : --this.current !== 0 ? this.current : (this.current = 1))
        this.$Message.success('删除成功')
      } catch (error) {}
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>

